<template>
  <div>
    <header >
      <div>
        <el-row type="flex" :gutter="0"  class="bar">
        <el-col :span="4" style="margin-top:5px;margin-left:100px;">
          <img src="~/assets/image/log1.png" style="width:170px ; "></el-col>
        <el-menu
          :default-active="activeIndex" 
          class="el-menu-demo" 
          mode="horizontal" 
          text-color="#fff"
          active-text-color="#ffd04b"
          background-color='#3D444C'
          >
            <el-menu-item index="1" style="margin-right:40px">
              <router-link to="/" class="daohang">首页</router-link>
            </el-menu-item>
            <el-menu-item index="2" style="font-size:15px;margin-right:40px" >
              <router-link to="/paper" style="text-decoration: none;font-size:15px;display:block;">试卷中心</router-link>
            </el-menu-item>
            <el-menu-item index="3" style="font-size:15px;margin-right:40px">
              <router-link :to="{name:'wrong-id',params:{id:user.id}}" style="text-decoration: none;font-size:15px;display:block;">错题本</router-link>
            </el-menu-item>
            <el-menu-item index="4" style="font-size:15px;margin-right:40px">
              <router-link :to="{name:'userPage-id',params:{id:user.id}}" style="text-decoration: none;font-size:15px;display:block;">我的试卷</router-link>
            </el-menu-item>

            <el-submenu v-if="user.role == 1" style="font-size:15px;margin-right:200px" index="5">
              <template slot="title">我的班级</template>
              <el-menu-item index="2-1">
                <router-link :to="{name:'classes-id',params:{id:user.id}}" style="text-decoration: none;font-size:15px;display:block;color:#fff">班级列表</router-link>
              </el-menu-item>
              <el-menu-item index="2-2">我的考试</el-menu-item>
              <el-menu-item index="2-3" @click="dialogVisible = true">加入班级</el-menu-item>
            </el-submenu>

            <el-menu-item index="5" v-else style="font-size:15px;margin-right:200px">
              <div >
                <a  style="text-decoration: none;font-size:15px;display:block;" :href="'http://teacher.exam.com/'">管理班级</a>
              </div>
            </el-menu-item>
            
            <el-menu-item index="6" v-if="verify == false" style="font-size:15px" >
              <router-link  to="/login" class="daohang">登录</router-link>
            </el-menu-item> 
            <el-menu-item index="6" v-else disabled style="font-size:15px; color:#fff" >
              <span >欢迎您：{{user.username}}</span>
            </el-menu-item> 
            
      
        </el-menu>

        

        </el-row> 

        
      </div>

      <el-dialog
          title="加入班级"
          :visible.sync="dialogVisible"
          width="30%"
          >
          <el-form :model="form">
            <el-form-item label="班级口令" >
              <el-input v-model="form.joinKey" autocomplete="off" placeholder="请输入加入班级口令"></el-input>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="joinClasses">确 定</el-button>
          </span>
        </el-dialog>
    </header>
    <nuxt/>

    <div class="foot">
       <img src="~/assets/image/log1.png" style="width:150px">
       <el-row type="flex" justify="center" style="margin:20px auto">
         <el-col :span="4"><span style="color:#FFFFFF">个人微博</span></el-col>
         <el-col :span="4"><span style="color:#FFFFFF">个人微信</span></el-col>
         <el-col :span="4"><span style="color:#FFFFFF">github地址</span></el-col>
         <el-col :span="4"><span style="color:#FFFFFF">gitee地址</span></el-col>
       </el-row>
       <div><span style="color:#FFFFFF">Copyright © 2003-2020 沐知考试 All Rights Reserved</span></div>
     </div>

   

  </div>


</template>

<style>
  html,body{
    margin: 0;
    padding: 0;
    width:100%;  
    height:100%;
    
  }

  .el-menu-item.is-disabled{
    opacity:1.25;
  }

  .bar{
    text-align:center;
    font-size:18px;
    
    height:20%;
    background-color:#3D444C
  }
  .el-menu.el-menu--horizontal{
    border-bottom: solid 0px #e6e6e6; 
  }

  .foot{
    text-align: center;
    background-color:#3D444C;
    margin: 100px auto 0px;
    color:"#fff";
  }

  .daohang{
    text-decoration: none;
    font-size:15px;
    display:inline-block;
    
  }
  /* .el-dialog__header{
    padding: 0 0;
  }
  .el-dialog__body{
    padding: 0 0;
  } */


</style>



<script>
import userApi from '@/api/userApi';
import paperApi from '@/api/paperApi';
import studentApi from '@/api/studentApi';

  export default {
    watch: {
            "$route": function(){
                //路由变化会触发
                this.getuser()
            }
        },

    async fetch () {
      this.getuser()
    },


    asyncData(){
      this.getuser()
    },

    data() {
      return {
        activeIndex: '1',
        dialogVisible: false,
        verify:false,
        user:{
          username:"",
          id:null,
          role:1
        },
        form:{}
      };
    },

    created(){
      this.getuser()
    },
    methods:{
      
      getuser(){
          userApi.verify().then(response =>{
            if(response.data.code == 200){
              this.user = response.data.data
              this.verify = true
            }
          })
        },

      joinClasses(){
        studentApi.join(this.form.joinKey,this.user.id).then(response =>{
          if(response.data.code == 20000){
              this.$message(response.data.message);
            }
        })
        this.dialogVisible = false
      }
    }
    
  }
</script>

